<template>
  <el-card>
    <el-form inline>
      <el-form-item>
        <el-input
          placeholder="医院名称"
          v-model="SearchData.keyword"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="订单号"
          v-model="SearchData.outTradeNo"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="就诊人姓名"
          v-model="SearchData.patientName"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="SearchData.createTimeBegin"
          type="date"
          placeholder="选择开始日期"
        >
        </el-date-picker>

        <el-date-picker
          v-model="SearchData.createTimeEnd"
          type="date"
          placeholder="选择截止日期"
        >
        </el-date-picker>

        <el-date-picker
          v-model="SearchData.reserveDate"
          type="date"
          placeholder="选择就诊日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="SearchData.orderStatus" placeholder="订单状态">
          <el-option label="预约成功,待支付" :value="0"> </el-option>
          <el-option label="已支付" :value="1"> </el-option>
          <el-option label="已取号" :value="2"> </el-option>
          <el-option label="取消预约" :value="3"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getOrderList"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="remove">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column
      ><el-table-column
        prop="outTradeNo"
        label="订单交易号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="hosname"
        label="医院名称"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="depname"
        label="科室名称"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="title" label="医生职称" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="fetchTime"
        label="安排时间"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="patientName"
        label="就诊人"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="reserveTime"
        label="预约序号 "
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="amount"
        label="服务费（元）"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="param.orderStatusString"
        label="订单状态"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="updateTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="date" label="操作" align="center" fixed="right" width="120">
        <template v-slot="{ row }">
          <el-button type="primary" @click="view_button(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination
      class="page_Number"
      :current-page.sync="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size.sync="limit"
      layout=" ->,total,  prev, pager, next, sizes,jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import { reqOrderList } from "@/api/order";
export default {
  data() {
    return {
      SearchData: {
        keyword: "",
        outTradeNo: "",
        patientName: "",
        createTimeBegin: "",
        createTimeEnd: "",
        reserveDate: "",
        orderStatus: "",
      },
      tableData: [],
      // 页码
      page: 1,
      limit: 10,
      total: 0,
    };
  },

  //监听页码的变化 渲染前往的页码，每页条数，
  watch: {
    limit() {
      this.getOrderList();
    },
    page() {
      this.getOrderList();
    },
  },

  mounted() {
    // 初始化数据
    this.getOrderList();
  },
  methods: {
    view_button(row) {
      // 点击查看 携带id
      this.$router.push({
        name: "Shows",
        query: {
          id: row.id,
          form: this.$route.name,
        },
      });
    },
    // 请求订单列表页面数据
    async getOrderList() {
      try {
        const res = await reqOrderList(this.page, this.limit, this.SearchData);
        // console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      } catch (e) {}
    },

    //
    async remove() {
      this.SearchData.keyword = "";
      this.SearchData.outTradeNo = "";
      this.SearchData.patientName = "";
      this.getOrderList();
    },
  },
};
</script>

<style lang="scss">
.page_Number {
  margin-top: 20px;
}
</style>
